<template>
	<div class="energystation1">
		<div class="warning-top">
			<div class="warning-item">
				<div class="titles">
					<p>实时功率</p>
				</div>
				<div class="echats-con">
					<soc
						:info="{ xData, yData: yData1, unit: 'kW', cname: '实时功率' }"
					/>
				</div>
			</div>
			<div class="warning-item">
				<div class="titles">
					<p>日发电量</p>
					<!-- <el-button-group class="btns">
                      <el-button class=" el-button--normass_active" size="medium" type="normass">近七天</el-button>
                      <el-button size="medium" type="normass">当月</el-button>
                      <el-button size="medium" type="normass">当年</el-button>
                  </el-button-group> -->
				</div>
				<div class="echats-con">
					<soc
						:info="{
							xData: xData3,
							yData: yData2,
							unit: '万度',
							cname: '日发电量',
						}"
					/>
				</div>
			</div>
		</div>
		<div class="warning-top">
			<div class="warning-item">
				<div class="titles">
					<p>周发电量</p>
					<!-- <el-button-group class="btns">
                      <el-button class=" el-button--normass_active" size="medium" type="normass">近七天</el-button>
                      <el-button size="medium" type="normass">当月</el-button>
                      <el-button size="medium" type="normass">当年</el-button>
                  </el-button-group> -->
				</div>
				<div class="echats-con">
					<soc1
						:info="{
							xData: xData1,
							yData: yData3,
							unit: '万度',
							cname: '周发电量',
						}"
					/>
				</div>
			</div>
			<div class="warning-item">
				<div class="titles">
					<p>月发电量</p>
					<!-- <el-button-group class="btns">
                      <el-button class=" el-button--normass_active" size="medium" type="normass">接线图</el-button>
                      <el-button size="medium" type="normass">静态图</el-button>
                      <el-button size="medium" type="normass">矢量图</el-button>
                  </el-button-group> -->
				</div>
				<div class="echats-con">
					<soc1
						:info="{
							xData: xData2,
							yData: yData4,
							unit: '万度',
							cname: '月发电量',
						}"
					/>
				</div>
			</div>
		</div>
		<div class="warning-top">
			<div class="warning-item">
				<div class="titles">
					<p>年发电量</p>
				</div>
				<div class="echats-con">
					<soc1
						:info="{
							xData: xDataYear,
							yData: yDataYear,
							unit: '万度',
							cname: '年发电量',
						}"
					/>
				</div>
			</div>
			<div class="warning-item">
				<div class="titles">
					<p>光伏运行信息</p>
				</div>
				<div
					class="echats-con flex"
					style="flex-wrap: wrap; justify-content: flex-start"
				>
					<div class="yxxx-item">
						<p>{{ info.pPositive }}kW</p>
						<p>实时功率</p>
					</div>
					<div class="yxxx-item">
						<p>{{ info.pgenDaily }}万度</p>
						<p>日发电量</p>
					</div>
					<!-- <div class="yxxx-item">
						<p>{{ info.pgenWeekly }}万度</p>
						<p>周发电量</p>
					</div> -->
					<div class="yxxx-item">
						<p>{{ info.pgenMonthly }}万度</p>
						<p>月发电量</p>
					</div>
					<div class="yxxx-item">
						<p>{{ info.pgenYearly }}万度</p>
						<p>年发电量</p>
					</div>
					<!-- <div class="yxxx-item">
						<p>{{ info.capacity }}kW</p>
						<p>额定容量</p>
					</div> -->
					<div class="yxxx-item">
						<p>{{ info.dailyGeneratingDuration }}h</p>
						<p>日发电时长</p>
					</div>

					<div class="yxxx-item">
						<p>{{ info.pgenTotal }}万度</p>
						<p>累计发电量</p>
					</div>
					<div class="yxxx-item">
						<p>{{ info.co2 }}吨</p>
						<p>总CO2减排</p>
					</div>
					<div class="yxxx-item">
						<p>{{ info.incomeToday }}元</p>
						<p>当日收益</p>
					</div>
				</div>
			</div>
			<!-- <div class="warning-item">
				<div class="titles">
					<p>今日告警</p>
				</div>
				<div class="echats-con">
					<el-scrollbar class="scrollbar-wrapper" style="height: 100%">
						<div class="xfxx-item flex" v-for="item in gjxxList" :key="item.id">
							<div style="flex: 1">
								<span>{{ item.updateTime }}</span>
							</div>
							<div style="flex: 2; border-left: 1px solid #244c8c">
								<span>{{ item.yxName }}</span>
							</div>
						</div>
					</el-scrollbar>
				</div>
			</div> -->
		</div>

		<!-- <div class="warning-top">
      <div class="warning-item">
        <div class="titles">
          <p>遥测数据</p>
          <div class="btns" style="top: 2px;">
            <el-input size="mini" placeholder="输入遥测名称筛选" v-model="selectValue" clearable>
            </el-input>
          </div>
        </div>
        <div class="echats-con">
          <el-scrollbar class="scrollbar-wrapper" style="height: 100%;">
            <div class="table-yysj">
              <div class="yysj-item flex" :class="yysj_itemActive == item.id ? 'yysj-itemActive' : ''"
                v-for="item in ycListARR1" :key="item.id" @click="getYCXX(item)">
                <div>{{ item.ycName }}</div>
                <div>{{ item.value }}</div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
      <div class="warning-item">
        <div class="titles">
          <p>遥测运行曲线</p>
        </div>
        <div class="echats-con">
          <soc :info="{ xData:xData111, yData: yData111, unit: '', cname: '遥测运行曲线' }" />
        </div>
      </div>

    </div> -->
	</div>
</template>

<script>
import { pvInfo } from "@/api/modules/psc";
import {
	getgraph,
	monthlyPowerGeneration,
	weeklyPowerGeneration,
	yearPowerGeneration,
} from "@/api/modules/home.js";
import { ycList, ycInfo } from "@/api/modules/energyunit";

import soc from "./components/soc.vue";
import soc1 from "./components/soc1.vue";

export default {
	components: { soc, soc1 },
	props: {},
	data() {
		return {
			info: {},
			cname: {},
			xData: [],
			xData1: [],
			xData2: [],
			xData3: [],
			yData1: [],
			yData2: [],
			yData3: [],
			yData4: [],
			xDataYear: [],
			yDataYear: [],
			infoCNDy: [],
			gjxxList: [],
			timer: null,
			ycListARR: [],
			xData111: [],
			yData111: [],
			selectValue: "",
		};
	},
	watch: {},
	computed: {
		ycListARR1() {
			let self = this;
			return this.ycListARR.filter(function (data) {
				//只返回id是偶数的
				if (self.selectValue) {
					return data.ycName.indexOf(self.selectValue) > -1;
				} else {
					return data;
				}
			});
		},
	},
	methods: {
		getYCXX(item) {
			let self = this;
			this.yysj_itemActive = item.id;
			self.xData111 = [];
			self.yData111 = [];
			ycInfo({ devId: item.devId, sampleName: item.ycName }).then((res) => {
				let data = res.data;
				for (let index = 0; index < data.length; index++) {
					let element = data[index];
					self.xData111.push(element.date);
					self.yData111.push(element.ycHisDTOS ? element.ycHisDTOS.value : ""); //实时有效功率
				}
			});
		},
		getDate(id) {
			let self = this;
			pvInfo({ pvId: id }).then((res) => {
				if (res.code == 200) {
					this.info = res.data;
				}
			});
			// realtimeInfo({ id: id }).then((res) => {
			// 	if (res.code == 200) {
			// 		this.gjxxList = res.data;
			// 	}
			// });

			ycList({ devId: id }).then((res) => {
				if (res.code == 200) {
					this.ycListARR = res.data;
					if (this.ycListARR.length > 0) {
						this.getYCXX(this.ycListARR[0]);
					}
				}
			});
			getgraph({ devId: id, sampleName: "实时功率" }).then((res) => {
				if (res.code == 200) {
					let data = res.data;
					self.xData = [];
					self.yData1 = [];
					for (let index = 0; index < data.length; index++) {
						let element = data[index];
						self.xData.push(element.date);
						self.yData1.push(
							element.graphHisDTO ? element.graphHisDTO.value.toFixed(2) : ""
						); //实时有效功率
					}
				}
			});
			getgraph({ devId: id, sampleName: "日发电量" }).then((res) => {
				if (res.code == 200) {
					let data = res.data;
					self.xData3 = [];
					self.yData2 = [];
					for (let index = 0; index < data.length; index++) {
						let element = data[index];
						self.xData3.push(element.date);
						self.yData2.push(
							element.graphHisDTO ? element.graphHisDTO.value.toFixed(2) : ""
						); //实时有效功率
					}
				}
			});
			weeklyPowerGeneration({ devId: id, sampleName: "周发电量" }).then(
				(res) => {
					if (res.code == 200) {
						let data = res.data;
						self.xData1 = [];
						self.yData3 = [];
						for (let index = 0; index < data.length; index++) {
							let element = data[index];
							self.xData1.push(element.date);
							self.yData3.push(
								element.graphHisDTO ? element.graphHisDTO.value.toFixed(2) : ""
							); //实时有效功率
						}
					}
				}
			);

			monthlyPowerGeneration({ devId: id, sampleName: "月发电量" }).then(
				(res) => {
					if (res.code == 200) {
						let data = res.data;
						self.xData2 = [];
						self.yData4 = [];
						for (let index = 0; index < data.length; index++) {
							let element = data[index];
							self.xData2.push(element.date);
							self.yData4.push(
								element.graphHisDTO ? element.graphHisDTO.value.toFixed(2) : ""
							); //实时有效功率
						}
					}
				}
			);
			yearPowerGeneration({ devId: id, sampleName: "年发电量" }).then((res) => {
				if (res.code == 200) {
					let data = res.data;
					self.xDataYear = [];
					self.yDataYear = [];
					for (let index = 0; index < data.length; index++) {
						let element = data[index];
						self.xDataYear.push(element.date);
						self.yDataYear.push(
							element.graphHisDTO ? element.graphHisDTO.value.toFixed(2) : ""
						);
					}
				}
			});
		},
	},
	destroyed() {
		clearInterval(this.timer); //页面销毁时清除定时器
	},
	mounted() {
		let id = this.$route.query.id ? this.$route.query.id : "57139420272263169";
		this.cname = this.$route.query.name ? this.$route.query.name : "华为光伏";

		this.getDate(id);
		if (this.timer) {
			clearInterval(this.timer);
		} else {
			this.timer = setInterval(() => {
				this.getDate(id);
			}, 60000);
		}
	},
};
</script>
<style lang="scss">
.energystation1 {
	width: 100%;
	/* height: 100%; */

	.warning-top {
		display: flex;
		justify-content: space-around;
		position: relative;
		gap: 40px 20px;
		margin-bottom: 20px;

		.warning-item {
			height: 330px;
			flex: 1;

			.echats-con {
				width: 100%;
				height: calc(100% - 52px);
				justify-content: space-around;

				.xfxx-item {
					width: calc(100% - 40px);
					min-height: 30px;
					margin: 5px 13px 0 13px;

					position: relative;

					background: rgba(255, 255, 255, 0.01);
					border-radius: 0px 0px 0px 0px;
					border: 1px solid #244c8c;

					span {
						font-weight: 400;
						font-size: 12px;
						color: #ffffff;
						line-height: 30px;
						text-align: left;
						padding-left: 10px;
					}
				}

				.echats-xfxx1 {
					flex-wrap: wrap;

					.xfxx-item {
						margin: 10px 10px 0 10px;
						flex: 1;
						height: 30px;
						background: #29bc77;
						border-radius: 0px 0px 0px 0px;
						border: 1px solid #29bc77;
						position: relative;

						span {
							font-weight: 400;
							font-size: 14px;
							color: #ffffff;
							line-height: 30px;
							text-align: left;
							padding-left: 10px;
						}
					}

					.xfxx-itemred {
						background: rgba(128, 31, 1, 0.41);
						border-radius: 0px 0px 0px 0px;
						border: 1px solid rgba(128, 31, 1, 1);
					}
				}

				.yxxx-item {
					width: 180px;
					height: 94px;
					background: #05153c;
					border-radius: 4px 4px 4px 4px;
					margin-left: 10px;
					margin-top: 10px;

					p {
						text-align: center;

						&:first-child {
							height: 40px;
							font-weight: 500;
							font-size: 22px;
							color: #3fd1ff;
							line-height: 40px;
							margin-top: 15px;
						}

						&:last-child {
							height: 20px;
							font-weight: 300;
							font-size: 14px;
							color: #ffffff;
							line-height: 20px;
						}
					}
				}
				.yysj-itemActive {
					background: #46559d;
				}

				.yxzt {
					margin: 10px 10px 0 10px;
					/* width: 117px; */
					flex: 1;
					height: 200px;
					background: rgba(4, 4, 4, 0.47);
					border-radius: 4px 4px 4px 4px;

					.yxzt_title {
						margin-top: 10px;
						height: 22px;
						font-size: 14px;
						color: #ffffff;
						line-height: 19px;
						text-align: center;
					}

					.imgs {
						height: 100px;
						width: 55px;
						margin: 10px auto;
						background-image: url(./../../assets/img/Group_3.png);
						background-size: cover;
						background-repeat: no-repeat;
						position: relative;

						.conten {
							width: 40px;
							/* background: #29BC77; */
							position: absolute;
							bottom: 8px;
							left: 7px;
							/* height: 80px; */
							text-align: center;

							span {
								position: absolute;
								font-size: 12px;
								color: #fff;
								bottom: 40px;
								left: 0;
								display: block;
								width: 50px;
								text-align: center;
								/* position: absolute;
                              top: -10px; */
							}
						}
					}
				}
			}
		}
	}
}
</style>
